<template>
    <div>
        <div id="clubSeparate" v-if="clubSeparateShow">
            <div class="title">
                <div>社团分采</div>
                <div class="publish" @click="goPublish">发布社团风采</div>
            </div>
            <div class="choice">
                <el-checkbox v-model="selectAll" @change="checkedAll()"></el-checkbox>
                <el-button size="mini" class="delete" @click="getDelete">删除</el-button>
            </div>
            <!-- 列表 -->
            <div class="content">
                <div class="list" v-for="(item, index) in listData.slice((pageNum - 1) * pageSize, pageNum * pageSize)" :key="index">
                    <el-checkbox v-model="item.select" @change="checked()" class="select"></el-checkbox>
                    <img src="../../image/beijingtu.png" alt="">
                    <div class="left">
                        <div class="subject">{{item.name.title}}</div>
                        <div class="intro">{{item.name.intro}}</div>
                    </div>
                    <div class="right">
                        <div>发布时间：</div>
                        <div>{{item.date}}</div>
                    </div>
                </div>
            </div>
            <!-- 分页 -->
            <div class="paging">
                <div class="page" @click="homePage">首页</div>
                <!-- @pagination="getListData" -->
                <el-pagination background v-show="pageSize > 0"
                    :total="listData.length" layout="prev, pager, next"
                    prev-text="上一页" next-text="下一页"
                    :page-size="pageSize" @current-change="clickChange">
                </el-pagination>
                <div class="page" @click="trailingPage">尾页</div>
            </div>
            <!-- 删除 -->
            <div id="delete" v-show="deleteShow">
                <div class="prompt">
                    <div class="top">删除消息<i class="el-icon-circle-close" style="color: #F19417;" @click="hideDelete"></i></div>
                    <div class="center">您确定要删除全部消息吗？</div>
                    <div class="bottom">
                        <div class="confirm" @click="confirm">确定</div>
                        <div class="cancel" @click="cancel">取消</div>
                    </div>
                </div>
            </div>
        </div>
        <div id="publish" v-if="publishShow">
            <div class="title">发布社团风采</div>
            <!-- 列表 -->
            <div class="content">
                <div class="top">
                    <div>标题：</div>
                    <el-input type="textarea" v-model="publishTitle" maxlength="20" show-word-limit placeholder="请输入您要发布的标题，最多可输入20字！"></el-input>
                </div>
                <div class="addCover">
                    <div class="left">添加封面：</div>
                    <div class="right">
                        <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
                            :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <div>建议大小在1M以内</div>
                    </div>
                </div>
                <div class="top">
                    <div>公告内容：</div>
                    <el-input type="textarea" v-model="publishText" maxlength="200" show-word-limit placeholder="请输入您要发布的内容，最多可输入200字！"></el-input>
                </div>
                <div class="bottom">
                    <div class="confirmPublish" @click="goConfirmPublish">确定</div>
                    <div class="cancelPublish" @click="goCancelPublish">取消</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
	data() {
		return {
            clubSeparateShow: true, // 社团公告显示隐藏
            selectAll:false, //全选
            unread: "4", // 未读
            altogether: "25", // 总共
            select: "", // 不全选
            listData: [{
                id: "1",
                date: '2021-3-5',
                name: {
                    title: "中国共产党成立100周年",
                    intro: "华夏同庆中国共产党成立100周年，由驰柯 文化传播有限公司特约赞助。",
                },
                address: '审核通过'
            },{
                id: "2",
                date: '2021-3-5',
                name: '观看直播三十分钟',
                address: '审核通过'
            },{
                id: "2",
                date: '2021-3-5',
                name: '观看直播三十分钟',
                address: '审核通过'
            },{
                id: "2",
                date: '2021-3-5',
                name: '观看直播三十分钟',
                address: '审核通过'
            }, {
                id: "3",
                date: '2021-3-5',
                name: '收藏一条资源',
                address: '审核通过'
            }, {
                id: "4",
                date: '2021-3-5',
                name: '取消活动预定',
                address: '审核通过'
            }, {
                id: "5",
                date: '2021-3-5',
                name: '完善资料',
                address: '审核通过'
            }], // 列表内容
            pageNum: 1, //显示第几页
            pageSize: 4, //一页的数据数量
            deleteShow: false, // 删除默认隐藏
            // 发布公告
            publishShow: false, // 发布公告显示隐藏
            publishTitle: "", // 公告标题输入值
            publishText: "", // 公告内容输入值
        };
	},
    mounted(){},
	methods: {
        // 全选
        checkedAll() {
            if(this.selectAll){
                console.log(this.selectAll)
                this.listData.map(item=>{
                    item.select = true
                })
            }else{
                this.listData.map(item=>{
                    item.select = false
                })
            }
        },
        // 删除
        getDelete() {
            this.deleteShow = true
        },
        // 关闭删除弹框
        hideDelete(){
            this.deleteShow = false
        },
        // 确定删除删除
        confirm(){
            this.deleteShow = false
            this.$message({
                message: "删除成功",
                type: 'success'
            });
        },
        // 取消删除
        cancel(){
            this.deleteShow = false
        },
        // 不全选
        checked() {
            let num = 0
            this.listData.map(item=>{
                if(item.select == false){
                    this.selectAll = false
                    num++
                }
            })
            if(num == 0){
                this.selectAll = true
            }
        },
        // 首页
        homePage() {
            this.clickChange(1)
        },
        // 当前页
        clickChange(val) {
            this.pageNum = val;
            console.log(this.pageNum)
            // this.getListData();
        },
        // 尾页
        trailingPage(val) {
            this.pageNum = val;
            // console.log(this.pageNum)
            // this.getListData();
        },
        // 发布公告
        goPublish() {
            this.clubSeparateShow = false
            this.publishShow = true
        },
        // 确认发布公告
        goConfirmPublish() {
            this.publishShow = false
            this.clubSeparateShow = true
        },
        // 取消发布公告
        goCancelPublish() {
            this.publishShow = false
            this.clubSeparateShow = true
        },
    },
    watch: {},
}
</script>

<style scoped lang="less">
@media screen and (min-width: 1400px){
    #clubSeparate{
        padding: 3% 5%;
        .title{
            width: 100%;
            font-size: 24px;
            padding-bottom: 2%;
            border-bottom: 1px solid #ddd;
            display: flex;
            div{
                flex: 1;
            }
            .publish{
                font-size: 18px;
                color: #F19417;
                text-align: right;
            }
        }
        .choice{
            width: 96%;
            font-size: 16px;
            padding: 3% 2% 1% 2%;
            border-bottom: 1px solid #ddd;
            display: flex;
            .delete{
                margin-left: 3%;
            }
        }
        // 列表
        .content{
            width: 100%;
            height: 400px;
            overflow: auto;
            .list:hover{
                box-shadow: 0px 5px 10px 0px rgba(64, 45, 20, 0.15);
                .left{
                    .subject{
                        color: #F19417;
                    }
                }
            }
            .list{
                width: 96%;
                // height: 90px;
                padding: 2% 0% 2% 4%;
                display: flex;
                border-bottom: 1px solid #ddd;
                .select{
                    display: flex;
                    align-items: center;
                    margin: 0% 3% 0% -3%;
                }
                img{
                    width: 100px;
                    height: 90px;
                }
                .left{
                    flex: 3;
                    margin-left: 3%;
                    .subject{
                        width: 70%;
                        font-size: 18px;
                        // 单行溢出隐藏
                        overflow:hidden;
                        text-overflow:ellipsis;
                        white-space:nowrap;
                    }
                    .intro{
                        width: 70%;
                        margin-top: 4%;
                    }
                }
                .right{
                    width: 12%;
                    color: #ccc;
                    padding-top: 3%;
                    text-align: center;
                    padding: 4% 0% 0% 2%;
                    border-left: 1px solid #ddd;
                    div{
                        line-height: 20px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }
            }
        }
        // 分页
        .paging{
            width: 100%;
            margin-top: 5%;
            // 水平垂直居中
            display: flex;
            justify-content: center;
            align-items: center;
            /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
                background-color: #F19417;
            }
            .page{
                width: 7%;
                text-align: center;
                line-height: 30px;
                background: #F0F0F0;
                border-radius: 2px;
                margin: 0% 0.5%;
            }
        }
        // 取消收藏
        #delete{
            width: 100%;
            height: 916px;
            background: rgba(56, 46, 46, 0.2);
            position: absolute;
            top: 0%;
            left: 0%;
            z-index: 1;
            .prompt{
                width: 22%;
                background: #FFFFFF;
                border-radius: 5px;
                margin: 15% 0% 0% 35%;
                text-align: center;
                .top{
                    font-size: 18px;
                    font-weight: 500;
                    line-height: 40px;
                    padding-top: 3%;
                    i{
                        float: right;
                        margin: 0% 3% 0% 0%;
                    }
                }
                .center{
                    font-size: 14px;
                    margin: 10% 0%;
                }
                .bottom{
                    width: 100%;
                    display: flex;
                    padding-bottom: 10%;
                    div{
                        width: 20%;
                        line-height: 30px;
                        border-radius: 5px;
                    }
                    .confirm{
                        margin: 0% 5% 0% 25%;
                        background: #F19417;
                        color: white;
                    }
                    .cancel{
                        background: #ddd;
                    }
                }
            }
        }
    }
    // 发布公告
    #publish{
        padding: 3% 5%;
        .title{
            width: 100%;
            font-size: 24px;
            text-align: center;
            padding-bottom: 2%;
            border-bottom: 1px solid #ddd;
        }
        // 列表
        .content{
            width: 100%;
            color: rgb(122, 116, 116);
            .top{
                width: 94%;
                padding: 3% 3% 2% 3%;
                font-size: 14px;
                display: flex;
                justify-content: center;
                align-items: center;
                div{
                    flex: 1;
                }
                .el-textarea{
                    flex: 8;
                }
            }
            // 添加封面
            .addCover{
                width: 100%;
                margin-top: 3%;
                display: flex;
                justify-content: center;
                align-items: center;
                .left{
                    width: 15%;
                    font-size: 18px;
                    text-align: center;
                }
                .right{
                    width: 85% !important;
                    div{
                        font-size: 14px;
                        color: #ccc;
                    }
                }
            }
            .bottom{
                width: 94%;
                line-height: 30px;
                padding: 5% 3% 2% 3%;
                display: flex;
                font-size: 16px;
                text-align: center;
                .confirmPublish{
                    width: 20%;
                    color: white;
                    background: #F19417;
                    margin: 0% 3% 0% 25%;
                }
                .cancelPublish{
                    width: 20%;
                    background: #ddd;
                }
            }
        }
    }
}



@media screen and (max-width: 1400px){
    #clubSeparate{
        padding: 2% 4%;
        .title{
            width: 100%;
            font-size: 22px;
            padding-bottom: 2%;
            border-bottom: 1px solid #ddd;
            display: flex;
            div{
                flex: 1;
            }
            .publish{
                font-size: 16px;
                color: #F19417;
                text-align: right;
            }
        }
        .choice{
            width: 96%;
            font-size: 14px;
            padding: 3% 2% 1% 2%;
            border-bottom: 1px solid #ddd;
            display: flex;
            .delete{
                margin-left: 3%;
            }
        }
        // 列表
        .content{
            width: 100%;
            height: 400px;
            overflow: auto;
            .list:hover{
                box-shadow: 0px 5px 10px 0px rgba(64, 45, 20, 0.15);
                .left{
                    .subject{
                        color: #F19417;
                    }
                }
            }
            .list{
                width: 96%;
                // height: 90px;
                padding: 2% 0% 2% 4%;
                display: flex;
                border-bottom: 1px solid #ddd;
                .select{
                    display: flex;
                    align-items: center;
                    margin: 0% 3% 0% -3%;
                }
                img{
                    width: 90px;
                    height: 80px;
                }
                .left{
                    flex: 3;
                    margin-left: 3%;
                    .subject{
                        width: 70%;
                        font-size: 16px;
                        // 单行溢出隐藏
                        overflow:hidden;
                        text-overflow:ellipsis;
                        white-space:nowrap;
                    }
                    .intro{
                        width: 70%;
                        margin-top: 3%;
                    }
                }
                .right{
                    width: 12%;
                    color: #ccc;
                    padding-top: 3%;
                    text-align: center;
                    padding: 4% 0% 0% 2%;
                    border-left: 1px solid #ddd;
                    div{
                        line-height: 16px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }
            }
        }
        // 分页
        .paging{
            width: 100%;
            margin-top: 4%;
            // 水平垂直居中
            display: flex;
            justify-content: center;
            align-items: center;
            /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
                background-color: #F19417;
            }
            .page{
                width: 7%;
                text-align: center;
                line-height: 30px;
                background: #F0F0F0;
                border-radius: 2px;
                margin: 0% 0.5%;
            }
        }
        // 删除
        #delete{
            width: 100%;
            height: 825px;
            background: rgba(56, 46, 46, 0.2);
            position: absolute;
            top: 0%;
            left: 0%;
            z-index: 1;
            .prompt{
                width: 22%;
                background: #FFFFFF;
                border-radius: 5px;
                margin: 15% 0% 0% 35%;
                text-align: center;
                .top{
                    font-size: 16px;
                    font-weight: 500;
                    line-height: 40px;
                    padding-top: 3%;
                    i{
                        float: right;
                        margin: 0% 3% 0% 0%;
                    }
                }
                .center{
                    font-size: 12px;
                    margin: 8% 0%;
                }
                .bottom{
                    width: 100%;
                    display: flex;
                    padding-bottom: 10%;
                    div{
                        width: 20%;
                        line-height: 26px;
                        border-radius: 5px;
                    }
                    .confirm{
                        margin: 0% 5% 0% 27%;
                        background: #F19417;
                        color: white;
                    }
                    .cancel{
                        background: #ddd;
                    }
                }
            }
        }
    }
    // 发布社团风采
    #publish{
        padding: 2% 4%;
        .title{
            width: 100%;
            font-size: 22px;
            text-align: center;
            padding-bottom: 2%;
            border-bottom: 1px solid #ddd;
        }
        // 列表
        .content{
            width: 100%;
            color: rgb(122, 116, 116);
            .top{
                width: 94%;
                padding: 3% 3% 2% 3%;
                font-size: 12px;
                display: flex;
                justify-content: center;
                align-items: center;
                div{
                    flex: 1;
                }
                .el-textarea{
                    flex: 8;
                }
            }
            // 添加封面
            .addCover{
                width: 100%;
                margin-top: 2%;
                display: flex;
                justify-content: center;
                align-items: center;
                .left{
                    width: 15%;
                    font-size: 16px;
                    text-align: center;
                }
                .right{
                    width: 85% !important;
                    div{
                        font-size: 12px;
                        color: #ccc;
                    }
                }
            }
            .bottom{
                width: 94%;
                line-height: 26px;
                padding: 5% 3% 2% 3%;
                display: flex;
                font-size: 14px;
                text-align: center;
                .confirmPublish{
                    width: 18%;
                    color: white;
                    background: #F19417;
                    margin: 0% 3% 0% 25%;
                }
                .cancelPublish{
                    width: 18%;
                    background: #ddd;
                }
            }
        }
    }
}
</style>